<template>
    <div class="homeTop">
        <div class="homeCarousel">
            <div class="swiper-wrapper">
                <router-link class="swiper-slide" v-for="str in  listImg" :style="{background:`url(${str.url}) no-repeat`}" :to="str.href" :key="str.id"></router-link>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="homeNoticeBg">
            <div class="homeNotice">
                <span class=" fl icon iconfont icon-horn"></span>
                <router-link to="">更多<span class="icon iconfont icon-right"></span></router-link>
                <div class="homeNoticeCarousel">
                    <div class="swiper-wrapper">
                        <router-link class="swiper-slide" v-for="notice in  notices" :to="notice.to" :key="notice.id">
                            <span class="fl" v-text="notice.title"></span>
                            <span class="fr" v-text="notice.time"></span>
                        </router-link>
                    </div>
                </div>
            </div>
        </div>
        <div class="homeIntro">
            <div class="homeIntro1">
                <el-row :gutter="0">
                    <el-col :span="8" v-for="introData in introDatas" :key="introData.title">
                        <div>
                            <h5>{{introData.title}}</h5>
                            <p class="numJ"></p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="homeIntro2">
                <el-row :gutter="160">
                    <el-col :span="8">
                        <div class="Intro2-1">
                            <span class="icon iconfont icon-context"></span>
                            <h5>国资背景</h5>
                            <p>国资控股强强联合</p>
                            <p>安全健康值得信赖</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="Intro2-2">
                            <span class="icon iconfont icon-depository"></span>
                            <h5>无忧存证</h5>
                            <p>数据保全加密储存</p>
                            <p>司法认可便捷权威</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="Intro2-3">
                            <span class="icon iconfont icon-safe"></span>
                            <h5>安全保障</h5>
                            <p>严格风控层层把关</p>
                            <p>数据存储司法权威</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="homeNewUserWelfare">
            <!--<img src="../../assets/images/newUserWelfare.png" alt="">-->
            <div class="homeNewUserWelfarePst">
                <div>注册就送<span class="homeSpc">10000</span>元现金体验红包</div>
                <p>预期年化收益率<span class="homeSpc">14.4%</span></p>
            </div>
            <router-link to=""><el-button round>了解详情</el-button></router-link>
        </div>
    </div>
</template>

<script>
    import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.min.css'
    let introDatas = [
            {title:"累计投资金额",text:"22亿4563万5550.00元"},
            {title:"为用户赚取收益",text:"22亿4563万5550.00元"},
            {title:"累计注册人数",text:"4589268人"}
        ];
    export default{
        data() {
            return {
                listImg: [
                    { url: './src/assets/images/banner1.png',href:"javascript:void(0)" },
                    { url: './src/assets/images/banner1.png',href:"javascript:void(0)" },
                    { url: './src/assets/images/banner1.png',href:"javascript:void(0)" },
                    { url: './src/assets/images/banner1.png',href:"javascript:void(0)" }
                ],
                notices:[
                    {title:'【平台公告】 钱内助正式签署银行存管协议',time:"2017.11.29",to:"javascript:void(0)"},
                    {title:'【平台公告】 钱内助正式签署银行存管协议',time:"2017.11.29",to:"javascript:void(0)"},
                    {title:'【平台公告】 钱内助正式签署银行存管协议',time:"2017.11.29",to:"javascript:void(0)"},
                    {title:'【平台公告】 钱内助正式签署银行存管协议',time:"2017.11.29",to:"javascript:void(0)"},
                    {title:'【平台公告】 钱内助正式签署银行存管协议',time:"2017.11.29",to:"javascript:void(0)"},
                    {title:'【平台公告】 钱内助正式签署银行存管协议',time:"2017.11.29",to:"javascript:void(0)"}
                ],
                introDatas:introDatas
            }
        },
        mounted() {
            let  homeCarousel= new Swiper('.homeCarousel',
                {
                    spaceBetween: 0,
                    autoplay: true,
                    pagination: {
                        el: '.swiper-pagination',
                        type: 'bullets',
                        clickable:true
                    },
                });
            let homeNoticeCarousel = new Swiper('.homeNoticeCarousel',
                {
                    direction : 'vertical',
                    spaceBetween: 0,
                    autoplay: true
                });
            homeNoticeCarousel.el.onmouseover = function(){
                homeNoticeCarousel.autoplay.stop();
            };

            //数字跳动效果
            let numJ = document.querySelectorAll(".numJ"),
                numJlength = numJ.length;
            function getHtml(text, container) {
                let str = text.toString();
                let amountHtml = '';
                for(let i = 0; i < str.length; i ++){
                    amountHtml += '<em>' + str.charAt(i) + '</em>';
                }
                container.innerHTML = amountHtml;
                let bitBox = container.getElementsByTagName('em'),
                    bitboxArr = Array.prototype.slice.call(bitBox);
                bitboxArr.forEach((item,i) => {
                    let $thisText = item.innerHTML;
                    if($thisText >= "0" && $thisText <= "9"){
                        item.innerHTML = "0";
                    }
                    let currentNumber = 0;
                    let timer = setInterval(function () {
                        if(item.innerHTML >= str.charAt(i)){
                            clearInterval(timer);
                        }
                        else {
                            item.innerHTML = currentNumber;
                        }
                        currentNumber ++;
                    }, 500 / (str.charAt(i)));

                })
            }

            for(let i =0; i < numJlength; i++){
                getHtml(introDatas[i].text,numJ[i]);
            }
            //数字跳动完

        }
    }


</script>

<style lang="scss" scoped>
    .homeTop{
        min-width: 1200px;
        width: 100%;
        overflow: hidden;
        a{display: block;}
    }
    .homeCarousel {
        width: 100%;
        height: 578px;
        position: relative;
    }
    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        box-sizing: content-box;

    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: 100%;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 100%;
        position: relative;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
    }
    .homeNoticeBg{
        background-color: #d6d7d8;
    }
    .homeNotice{
        width: 1200px;
        margin: 0 auto;
        padding: 8px 0;
        color:#666;
        font-size: 16px;
        height: 28px;
        line-height: 28px;
        vertical-align: middle;
        span.icon-horn{
            font-size: 24px;
            color: #ff763a;
        }
        a{
            float: right;
            color: #666;
            &:hover{
                color: #e95412;
            }
        }
        span.icon-right{
            padding-left: 10px;
        }
        .homeNoticeCarousel{
            width: 1070px;
            margin: 0 auto;
            height: 28px;
            overflow: hidden;
            .swiper-slide{
                display: unset;
                &:hover{
                    color: #e95412;
                }
            }
        }

    }

    .homeIntro{
        background-color: #fff;
        width: 1200px;
        margin: 0 auto;

        .homeIntro1{
            padding-top: 40px;
            text-align: center;
            color: #474747;
            font-weight:normal;
            h5{
                font-weight: normal;
                font-size: 21px;
            }
            p{
                font-size: 24px;
                color: #ff763a;
                letter-spacing: 1.5px;
                line-height: 1.8;
                i{
                    font-style: normal;
                }
            }
        }
        .homeIntro2{
            padding: 45px 0 50px 0;
            width: 1026px;
            margin: 0 auto;
            h5{
                font-size: 21px;
                color: #474747;
                font-weight: normal;
                line-height: 1.6;
            }
            p{
                font-size: 15px;
                color: #999;
                line-height: 1.5;
            }
            .Intro2-1,.Intro2-2,.Intro2-3{
                position: relative;
                padding-left: 100px;

                &:hover {
                    span{
                        transform: rotateY(360deg) scale(1.1);
                    }
                }
                span{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    font-size: 63px;
                    color: #ff806b;
                    transition: all 0.8s ease-in-out;
            }
            }

            .Intro2-2:before,.Intro2-2:after{
                content: "";
                position: absolute;
                width: 1px;
                height: 76px;
                background-color: #e1e1e1;
                top:20px;
            }

            .Intro2-2:before{
                left:-90px;

            }
            .Intro2-2:after{
                right: -90px;
            }
        }
    }

    .homeNewUserWelfare{
        height: 954px;
        position: relative;
        color: #fff;
        margin: 0 auto;
        background: url("../../assets/images/newUserWelfare.png") center center no-repeat;
        .homeNewUserWelfarePst{
            text-align: center;
            padding-top: 390px;
            div{
                text-indent: -385px;
        }
        }
        span.homeSpc{
            color: #ffe00e;
        }
        img{
            vertical-align: top;
        }
        div{
            font-size: 54px;
        }
        p{
            font-size: 43px;
            padding-top: 20px;
            text-indent: -720px;
        }
        a{
            position: absolute;
            left: 50%;
            top:588px;
            display: inline-block;
            margin-left: -570px;
            button{
                width: 270px;
                height:76px;
                font-size: 32px;
                color: #fff;
                background-color: transparent;
                border:2px solid #fff;
                border-radius: 39px;
                &:hover{
                    background-color: #e95412;
                    border-color: #e95412;
                }
            }

        }

    }
</style>

<style>
    .swiper-pagination span{
        background: #e5e4e4;
        border-radius: 0;
        width: 30px;
        height: 4px;
        margin: 0 9px;
    }
    .swiper-slide{
        background-position: center center !important;
        width: 100% !important;
    }
    .homeIntro .homeIntro1 p em{
        font-style: normal;
    }
</style>
